<template>
  <div class="container"  :class="{'mobile_container': isMobile}">
		<topHeader ref="topHeader"></topHeader>

    <div class="video_detail">
      <!-- <video src=""></video> -->
      <div class="video_box">
        <i class="icon_close_big" @click="closeVideo"></i>
        <video :src="videoList[videoIndex]" autoplay controls 
					ref="video" 
					@ended="videoEnd" 
					@pause="videoPause" 
					@canplaythrough="videoCanplaythrough" 
					width="100%"

					webkit-playsinline="playsinline"
					preload='auto'
					x5-video-player-type="h5"
					x5-video-player-fullscreen="true"
					x5-playsinline='playsinline'
					playsinline='playsinline'
				>
				</video>
        <div class="video_end_mask" v-if="videoEnded">
          <div class="popup">
            <i class="icon_repaly" @click="replayVideo"></i>
            <p>{{viewText}}</p>
            <div class="btn btn_video_appointment" @click="appointmentClick">预约试听课程</div>
          </div>
        </div>
      </div>
    </div>
		

    <copyRight></copyRight>

    
  </div>
</template>

<script>
import copyRight from './common/copyRight'
import topHeader from './common/topHeader'
// import video1 from '../assets/image/1.mp4'
export default {
  name: 'videoDetail',
  data() {
    return {
      tab_id: 3,
      videoEnded: false,
      videoIndex: 0,
      // videoList: [video1, video1, video1],
      videoList: [
				"http://www.mingxiaoclub.cn/video/3.mp4",
				"http://www.mingxiaoclub.cn/video/2.mp4",
				"http://www.mingxiaoclub.cn/video/1.mp4",
			],
      viewText: '重新观看',
      maskShowStatus: false,
      appointmentStep: 1,
      formAppointment: {
				phone: '',
				name: '',
				schoolArea: '',
				age: '',
				curriculum: '',
			},
			formAppointment_verifi: {
				phone: '',
				verificode: '',
      },
			rules:{},
			veri_time: 0,
			isMobile: false,
    }
	},
	
  created() {
		this.isMobile = /(iPhone|iPad|iPod|iOS|Android)/i.test(window.navigator.userAgent);
    this.videoIndex = this.$route.query.video - 1;
    window.scrollTo(0,0);
	},
	
	mounted() {
		// this.$refs.video.addEventListener('pause', function() {
		// 	myVue.videoEnded = true;
		// 	myVue.viewText = '继续观看'
		// 	console.log('11111')
		// })
		// this.$refs.video.addEventListener('canplaythrough', function() {
		// 	myVue.videoEnded = false;
		// 	console.log('aaaa')
    //   // this.viewText = '重新观看'
		// })
	},
  methods: {
    closeVideo() {
			if(this.isMobile) {
				this.$router.push({
					name: 'mobileHome',
					params: {
						tab_id: 3
					}
				})
			}else{
				this.$router.push({
					name: 'home',
					params: {
						tab_id: 3
					}
				})
			}
      
		},
    
    replayVideo() {
			this.videoEnded = false;
			this.$refs.video.play()
		},
		videoCanplaythrough() {
			this.videoEnded = false;
		},
		videoPause() {
			this.viewText = '继续观看'
			this.videoEnded = true;
		},
    videoEnd() {
      this.viewText = '重新观看'
      this.videoEnded = true;
		},
    
    appointmentClick() {
			this.$refs.topHeader.appointmentClick();
		},
    

    clearForm(data) {
			for (let i in data) {
				if (data.hasOwnProperty(i) === true) {
					data[i] = "";
				}
			}
		}

  },

  components: {
    copyRight,
    topHeader,
  }
}


</script>

<style scoped>

.video_detail{
  font-size: 0;
  text-align: center;
  padding: 80px 0;
  box-sizing: border-box;
  background: url('../assets/image/video_bg.jpg') 0 0 no-repeat;
  background-size: cover;
}

.video_box{
  position: relative;
  box-sizing: border-box;
  width: 960px;
  /* height: 540px; */
  margin: 0 auto;
}

.video_box .icon_close_big {
  display: inline-block;
  width: 53px;
  height: 57px;
  background: url('../assets/image/icon_close_big.png') 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  right: -26px;
  top: -26px;
  cursor: pointer;
  z-index: 2;
}

.video_end_mask {
		position: absolute;
		left: 0;
		top:0;
		background: rgba(0,0,0, .5);
		width: 100%;
		height: 100%;
	}
	
.video_end_mask .popup {
		background: #fff;
		width: 250px;
		height: 180px;
		border-radius: 8px;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		text-align: center;
		padding: 25px 0;
		box-sizing: border-box;
	}

.video_end_mask .popup p {
		margin-top: 18px;
    margin-bottom: 18px;
    font-size: 18px;
	}

.icon_repaly{
		width: 72px;
		height: 39px;
		display: inline-block;
		background: url('../assets/image/icon_replay.png') 0 0 no-repeat;
		background-size: 100%;
		cursor: pointer;
	}
.btn_video_appointment {
		width: 140px;
		height: 35px;
    line-height: 35px;
    font-size: 18px;
	}


.mobile_container .video_detail{
  font-size: 0;
  text-align: center;
  padding: 3.733333rem .533333rem 1.066667rem;
  box-sizing: border-box;
  background: url('../assets/image/video_bg.jpg') 0 0 no-repeat;
  background-size: cover;
}

.mobile_container .video_box{
  position: relative;
  box-sizing: border-box;
  width: 100%;
  /* height: 540px; */
  margin: 0 auto;
}

.mobile_container .video_box .icon_close_big {
  display: inline-block;
  width: 1.413333rem;
  height: 1.52rem;
  background: url('../assets/image/icon_close_big.png') 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  right: -0.533333rem;
  top: -0.8rem;
  cursor: pointer;
  z-index: 2;
}

.mobile_container .video_end_mask {
		position: absolute;
		left: 0;
		top:0;
		background: rgba(0,0,0, .5);
		width: 100%;
		height: 100%;
	}
	
.mobile_container .video_end_mask .popup {
		background: #fff;
		width: 6.666667rem;
		height: 4.8rem;
		border-radius: 8px;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		top: 50%;
		text-align: center;
		padding: 25px 0;
		box-sizing: border-box;
	}

.mobile_container .video_end_mask .popup p {
		margin-top: .48rem;
    margin-bottom: .48rem;
    font-size: .48rem;
	}

.mobile_container .icon_repaly{
		width: 72px;
		height: 39px;
		display: inline-block;
		background: url('../assets/image/icon_replay.png') 0 0 no-repeat;
		background-size: 100%;
		cursor: pointer;
	}
.mobile_container .btn_video_appointment {
		width: 3.733333rem;
		height: .933333rem;
    line-height: .933333rem;
    font-size: .48rem;
	}



  
</style>